<script setup lang="ts">
import axios from 'axios'
import request from '@/utils/request'
import { computed, reactive, ref, type Ref } from 'vue'
import { useRouter } from 'vue-router'
const value = ref(0)
type shop = {
  restaurantid: number
  addressareaid: string
  restauranttypename: string
  restaurantname: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  introduction: string
  addressdetail: string
  surplus: string
  state: number
  qualification: string
  point: number
}
const shopmenu = ref([] as shop[])
const originalShopMenu = ref([] as shop[])
axios({
  method: 'post',
  url: 'http://localhost:8080/restaurant/reccommendation',
  params: {
    username: window.localStorage.getItem('userName')
  },
  headers: {
    'Content-Type': 'application/octet-stream',
    Authorization: window.localStorage.getItem('Usertoken')
  }
}).then((res) => {
  const { data } = res
  shopmenu.value = data.data
  originalShopMenu.value = data.data
  //console.log("获得所有商家信息", data)
})
const isLogin = ref(false)
//获取路由器对象
let $router = useRouter()
//按钮的点击回调
const goHome = () => {
  $router.push('/index')
}
const goshangjia = () => {
  $router.push('/shangjia')
}
const goruzhu = () => {
  $router.push('/perCenter')
}
const ai = () => {
  $router.push('/chat')
}
const goaboutus = () => {
  $router.push('/aboutus')
}
const gofankui = () => {
  $router.push('/fankui')
}
const filterByCategory = (category: string) => {
  shopmenu.value = originalShopMenu.value.filter((item) => item.restauranttypename === category)
}
const showall = () => {
  axios({
    method: 'post',
    url: 'http://localhost:8080/restaurant/reccommendation',
    params: {
      username: window.localStorage.getItem('userName')
    },
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('Usertoken')
    }
  }).then((res) => {
    const { data } = res
    shopmenu.value = data.data
    originalShopMenu.value = data.data
    //console.log("获得所有商家信息", data)
  })
}

function nextdetail(
  val: number,
  val1: string,
  val2: string,
  val3: string,
  val4: string,
  val5: string,
  val6: string,
  val7: number
) {
  if (val7 == 2) {
    ElMessage.error('商家正在休息中...')
  } else if (val7 == 0) {
    ElMessage.warning('商家正在整改中...')
  } else {
    $router.push({
      path: '/detail',
      query: {
        restaurantid: val,
        addressareaid: val1,
        phone: val2,
        createtime: val3,
        updatetime: val4,
        image: val5,
        restaurantname: val6
      }
    })
  }
}
</script>

<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <!-- 头部导航 -->
    <header class="bg-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
          <svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
            <path
              d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
            ></path>
          </svg>
          <span class="text-xl font-bold text-gray-800">美食推荐</span>
        </div>
        <div class="hidden md:flex items-center space-x-6">
          <button @click="goHome" class="text-gray-700 hover:text-red-500 transition-colors">
            首页
          </button>
          <button @click="goshangjia" class="text-gray-700 hover:text-red-500 transition-colors">
            全部商家
          </button>
          <button @click="goruzhu" class="text-gray-700 hover:text-red-500 transition-colors">
            个人中心
          </button>
          <button @click="ai" class="text-gray-700 hover:text-red-500 transition-colors">
            点餐机器人
          </button>
        </div>
        <button class="md:hidden text-gray-700 focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </button>
      </div>

      <!-- 分类导航 -->
      <div class="bg-gray-100 py-2">
        <div class="container mx-auto px-4">
          <div class="flex items-center space-x-6 overflow-x-auto py-2">
            <button
              @click="showall"
              class="whitespace-nowrap px-4 py-1.5 bg-red-500 text-white rounded-full text-sm font-medium hover:bg-red-600 transition-colors"
            >
              全部分类
            </button>
            <button
              @click="filterByCategory('烧烤')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              烧烤
            </button>
            <button
              @click="filterByCategory('地方菜系')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              地方菜系
            </button>
            <button
              @click="filterByCategory('小吃快餐')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              小吃快餐
            </button>
            <button
              @click="filterByCategory('火锅')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              火锅
            </button>
            <button
              @click="filterByCategory('自助餐')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              自助餐
            </button>
            <button
              @click="filterByCategory('面馆')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              面馆
            </button>
            <button
              @click="filterByCategory('咖啡厅')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              咖啡厅
            </button>
            <button
              @click="filterByCategory('面包甜点')"
              class="whitespace-nowrap px-4 py-1.5 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-200 transition-colors"
            >
              面包甜点
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow">
      <!-- 广告横幅 -->
      <section class="bg-gradient-to-r from-red-500 to-orange-400 py-12 md:py-20">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
          <div class="md:w-1/2 mb-8 md:mb-0">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-4">
              发现身边的美食
            </h2>
            <p class="text-white/90 text-lg mb-6 max-w-lg">
              无论你是想品尝地道的地方美食，还是寻找异国风味，我们都能为你找到最合适的选择。
            </p>
            <button
              @click="ai"
              class="px-8 py-3 bg-white text-red-500 rounded-lg font-medium hover:bg-gray-100 transition-colors flex items-center"
            >
              <i class="fas fa-robot mr-2"></i> AI点餐
            </button>
          </div>
          <div class="md:w-1/2 flex justify-center">
            <img
              src="@/assets/login.jpg"
              alt="美食展示"
              class="w-full max-w-md rounded-lg shadow-xl transform md:rotate-3 hover:rotate-0 transition-transform duration-300"
            />
          </div>
        </div>
      </section>

      <!-- 推荐商家 -->
      <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl font-bold text-gray-800">推荐商家</h2>
            <button @click="showall" class="text-red-500 hover:text-red-600 transition-colors">
              全部 <i class="fas fa-arrow-right ml-1"></i>
            </button>
          </div>

          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <div class="item" v-for="(p, index) in shopmenu" :key="index">
              <div
                class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300 cursor-pointer"
                @click="
                  nextdetail(
                    p.restaurantid,
                    p.addressareaid,
                    p.phone,
                    p.createtime,
                    p.updatetime,
                    p.image,
                    p.restaurantname,
                    p.state
                  )
                "
              >
                <div class="relative">
                  <img :src="p.image" alt="商家图片" class="w-full h-48 object-cover" />
                  <div
                    class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full"
                  >
                    {{ p.restauranttypename }}
                  </div>
                </div>
                <div class="p-4">
                  <div class="flex justify-between items-start mb-2">
                    <h3 class="font-bold text-gray-800 text-lg">{{ p.restaurantname }}</h3>
                    <el-rate
                      v-model="p.point"
                      disabled
                      show-score
                      text-color="red"
                      score-template="{value} 分"
                    />
                  </div>
                  <div class="flex items-center text-gray-600 mb-3">
                    <el-icon class="text-gray-500 mr-1">
                      <PhoneFilled />
                    </el-icon>
                    <span class="text-sm">{{ p.phone }}</span>
                  </div>
                  <div class="flex items-center text-gray-600 text-sm mb-4">
                    <span class="text-gray-500 truncate max-w-[150px]">{{ p.addressdetail }}</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <div class="flex items-center">
                      <el-tag type="primary" class="text-xs px-2 py-1">营业中</el-tag>
                    </div>
                    <span class="text-red-500 font-medium">立即查看</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h3 class="text-lg font-bold mb-4">关于我们</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">公司简介</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">联系方式</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">加入我们</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">媒体报道</a>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">商家服务</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">商家入驻</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">培训中心</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">广告服务</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">商家学院</a>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">消费者服务</h3>
            <ul class="space-y-2">
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">食品安全</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">用户协议</a>
              </li>
              <li>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a>
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-bold mb-4">关注我们</h3>
            <div class="flex space-x-4 mb-4">
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition-colors"
              >
                <i class="fab fa-weixin text-white"></i>
              </a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition-colors"
              >
                <i class="fab fa-weibo text-white"></i>
              </a>
              <a
                href="#"
                class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-red-500 transition-colors"
              >
                <i class="fab fa-instagram text-white"></i>
              </a>
            </div>
            <p class="text-gray-400">客服热线：400-123-4567</p>
            <p class="text-gray-400">工作时间：周一至周日 9:00-22:00</p>
          </div>
        </div>
        <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500 text-sm">
          <p>© 2025 美食推荐. 保留所有权利.</p>
        </div>
      </div>
    </footer>
  </div>
</template>
